import React, {useState} from 'react';
import {connect} from 'umi';
import {ConnectState} from '@/models/connect';
import {Card, Input, Table, Tree} from 'antd';
import {Project} from "@/models/project";
import {DataNode} from 'rc-tree/lib/interface';
import {DashboardWithProject} from "@/models/dashboard";
import {WidgetWithDashboard} from "@/models/widget";

const {Search} = Input

export interface WidgetWithDashboardsWithProject extends WidgetWithDashboard {
  project: Project
}

interface WidgetProps {
  projects: Array<Project>;
  dashboardWithProjects: Array<DashboardWithProject>;
  widgetWithDashboards: Array<WidgetWithDashboard>;
}

const Widget: React.FC<WidgetProps> = (props) => {
  const {
    projects,
    dashboardWithProjects,
    widgetWithDashboards,
  } = props;

  const [dashboardKeys, setDashboardKeys] = useState<Array<any>>([]);
  const [selectedWidgetRowKeys, setSelectedWidgetRowKeys] = useState<Array<any>>([]);

  const columns = [
    {
      title: '指标',
      dataIndex: 'name',
    },
    {
      title: '数据权限',
      dataIndex: 'departmentNos',
      render:(text:any)=><Input readonly="readonly"/>
    }
  ];

  //拼装指标集合（加上看板和项目）
  const widgetWithDashboardsWithProjects: Array<WidgetWithDashboardsWithProject> = widgetWithDashboards.map((w) => {
    const dashboardWithProject = dashboardWithProjects.filter(d => d.id == w.dashboard.id)[0]
    const widgetWithDashboardsWithProject: WidgetWithDashboardsWithProject = {
      ...w,
      project: dashboardWithProject && dashboardWithProject.project
    }
    return widgetWithDashboardsWithProject
  }).filter(v => v.project)
  //看板树构建
  const dashboardTreeDatas: Array<DataNode> = projects.map((value: Project) => {
    const key = value.id
    const treeData: DataNode = {title: value.name, key: `project-${key}`}
    let children: Array<DataNode> = []
    dashboardWithProjects.map((dashboard: DashboardWithProject) => {
      if (dashboard.project.id === key) {
        const tree: DataNode = {title: dashboard.name, key: `dashboard-${dashboard.id}`}
        children.push(tree)
      }
    })
    treeData.children = children
    return treeData
  })

  //指标表格集合
  const widgetDataSources = dashboardKeys.length > 0 ? widgetWithDashboardsWithProjects.filter(v => {
    const dashboardId = v.dashboard.id + ''
    const projectId = v.project.id + ''
    const keys: Array<string> = dashboardKeys.map((v: string) => v.split("-")[1])
    return keys.includes(dashboardId) || keys.includes(projectId)
  }).map(value => {
    return {key: value.id, name: value.name}
  }) : []
  console.log(widgetDataSources)
  return (
    <div style={{display: 'flex'}}>
      <Card style={{width: 300}} size="small">
        <Tree
          onSelect={(selectedKeys) => {
            setDashboardKeys(selectedKeys)
          }}
          treeData={dashboardTreeDatas}
        />
      </Card>
      <Card title={<Search style={{borderRadius: 16}} placeholder="搜索指标" size='small'/>
      } style={{width: 700}} size="small">
        <Table
          key='id'
          rowSelection={{
            selectedRowKeys: selectedWidgetRowKeys,
            onChange: (selectedRowKeys) => {
              setSelectedWidgetRowKeys(selectedRowKeys)
            }
          }}
          columns={columns}
          dataSource={widgetDataSources}
        />
      </Card>
    </div>
  );
};

export default connect(({project, dashboard, widget, loading}: ConnectState) => ({
  projects: project.projects || [],
  dashboardWithProjects: dashboard.dashboardWithProjects || [],
  widgetWithDashboards: widget.widgetWithDashboards || [],

}))(Widget);
